<template>
	<view>
		<z-paging :show-refresher-when-reload="false"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top" class="">
				<!-- <u-navbar :borderBottom="false" :custom-back="back_self" back-text=" " :title="title"></u-navbar> -->
				<u-navbar :is-back="true" back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" :title="title"></u-navbar>
				<view class="bar_css">
					<u-tabs bar-width="128" :list="barList" font-size="28rpx" :bar-style="barStyle" :active-item-style="item_style" :is-scroll="true" :current="current" @change="barChange"></u-tabs>
				</view>
			</view>
		    <view class="list" >
				<view  class="list_item_box" v-for="(item , index) in dataList" :key="index">
					<view  v-for="(ite,ind) in item.order_spec" :key="ind"   class="list_item_box_center">
						<u-image @click="navTo(`/pages/goods_order_info/goods_order_info?order_id=${item.id}`)" :src="pic_change(ite.goods_data.pic)"  width="140rpx" height="140rpx" mode="aspectFit"></u-image>
						<view @click="navTo(`/pages/goods_order_info/goods_order_info?order_id=${item.id}`)" class="list_item_box_center_right">
							<view class="item_right_top">
								<view class="item_right_top_left uni-ellipsis-2">
									{{ite.goods_data.name}}
								</view>
								<view class="item_right_top_right">
									<span v-if="item.status==0">待支付</span>
									<span v-if="item.status==1">待发货</span>
									<span v-if="item.status==2">退款中</span>
									<span v-if="item.status==3">已退款</span>
									<span v-if="item.status==4">已发货</span>
									<span v-if="item.status==5">已收货</span>
									<span v-if="item.status==6">已完成</span>
									<span v-if="item.status==7">已关闭</span>
									<span class="color-333">x{{ite.num - ite.refund_num}}</span>
								</view>
							</view>
							<view class="item_right_center">
								<span class="item_right_center_price">{{ite.sku}}</span>
								<span> 
									<span class="font_1">实付款 </span>
									<span class="font_2">{{ite.price}}</span>
									<span class="font_3">RMB</span>
								</span>
							</view>
						</view>
						
					</view>
					<view class="list_item_box_bottom2" style="flex-wrap: wrap;">
						<view  v-if="item.status==0" @click="Order_cancel(item)" class="delete_order2" style="margin-left: 15rpx;">
							取消订单
						</view>
						<view v-if="item.status==7" @click="order_del(item)" class="delete_order2" style="margin-left: 15rpx;">
							删除订单
						</view>
						<view v-if="item.status==4" class="delete_order" :style="{background:style.color1}" @click="shouhuo(item)" style="margin-left: 15rpx;">
							确认收货
						</view>
						<view v-if="item.status==0" @click="order_pay(item)" :style="{background:style.color1}" class="delete_order" style="margin-left: 15rpx;">
							立即付款
						</view>
						<view v-if="item.status==1 || item.status==4 " @click="navTo(`/pages/goods_order_info/goods_order_info?order_id=${item.id}`)" :style="{background:style.color1}" class="delete_order" style="margin-left: 15rpx;">
							申请售后
						</view>
						<view v-if="item.status==1" @click="cuiFa()" :style="{background:style.color1}" class="delete_order" style="margin-left: 15rpx;">
							催促发货
						</view>
					</view>
				</view>
		    </view>
		</z-paging>
		<u-popup border-radius="25" v-model="tui_show"  mode="bottom">
			<view class="tui_show">
				<view class="tui_show_title" >退款原因</view>
				<view class="tui_show_text">
					<u-input v-model="tui_text" type="textarea" height="300"  :border="false" placeholder="请输入退款原因" />
				</view>
				<view class="" style="display: flex; justify-content: center;">
					<u-button class="btns" @click="tui_order(tui_info)" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">
						申请退款
					</u-button>
				</view>
				
			</view>
		</u-popup>
		<kefu class="" ></kefu>
	</view>
</template>

<script>
	import kefu from '@/componts/kefu/kefu.vue';
		export default {
			components:{
				kefu
			},
		data() {
			return {
				style:{},
				address_pop_show:false,
				addressList:[],
				address:{
					id:null
				},
				tui_info:{},
				tui_show:false,
				tui_text:'',
				type:1,
				current:0,
				gtype:null,
				title:'代买订单',
				code:'',
				dataList:[],
				kor_type:'',
				chooseItem:[],
				item_style:{
					color:'#333',
					fontSize:'28rpx'
				},
				pay_item:{},
				barStyle:{
					background:'#010101',
					height:'4rpx',
					padding:0
				},
				barList:[
					{name: '全部'},
					{name: '待付款'},
					{name: '待发货'},
					{name: '已发货'},
					{name: '已收货'},
					{name: '已完成'},
					{name: '已关闭'},
					{name: '退款中'},
					{name: '已退款'},
				],
			}
		},
		onLoad(data) {
			this.title = '商品订单'
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
			if(data.current){
				this.current = data.current
			}
		},
		onShow() {
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			var token = uni.getStorageSync('token')
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
			if(!token){
				uni.setStorageSync('isModule' , true)
				uni.showModal({
					title: '登录',
					content: '登录后可使用完整功能',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						uni.navigateTo({
							url:'/pages/login/login'
						})
					} else { 
						uni.switchTab({
							url:'/pages/index/index'
						})
						}  
					} 
				})
			}
			if(this.$refs.paging){

				this.$refs.paging.reload()
			}
		},
		
		
		methods: {
			cuiFa(){
				uni.showToast({
					title:'催发货成功!',
					icon:'none'
				})
			},
			back_self(){
				uni.switchTab({
					url:'/pages/self/self'
				})
			},
			// 取消退款
			pic_change(src){
				var pic_arr = src.split(',')
				return pic_arr[0]
			},
			cancel_apply_refund(item , ite){
				uni.showModal({
					title: '取消退款',
					content: '确认订单取消退款!',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					success: (res) => {
					if(res.confirm) {  
						console.log(ite.goods_order_apply_refund.id)
						var data = {
							goods_order_apply_refund_id:ite.goods_order_apply_refund.id,
							goods_order_spec_id:ite.id,
							order_id:item.id,
						}
						
						this.$gugoApi.GoodsOrder_cancel_apply_refund(data).then(res=>{
							this.current = 2
							this.$refs.paging.reload()	
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
			},
			// 收货
			shouhuo(item){
				uni.showModal({
					title: '确认收货',
					content: '请确认是否收到货物!',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					success: (res) => {
					if(res.confirm) {  
						this.$gugoApi.GoodsOrder_confirm_receipt({id:item.id}).then(res=>{
							this.current = 4
							this.$refs.paging.reload()	
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
			},
			order_pay(item){
				var data = {
					order_id:item.id,
				}
				uni.showLoading({
					title:'支付中...',
					mask:true
				})
				var that = this
				// #ifdef H5
				var ua = navigator.userAgent.toLowerCase();
				    var isWeixin = ua.indexOf('micromessenger') !== -1;
				    if (!isWeixin) {
				      this.$wqzApi.guGo_pay_good(data).then(res=>{
				      	var url = res.data
						console.log(res.data,'请求路径')
				      	window.location.href = url
				      	
				      }).catch(err=>{
				      	
				      })
				    }else{
				      this.$wqzApi.goods_pay_jsapi(data).then(res=>{
				      	var url = res.data
				      	window.location.href = url
				      	
				      }).catch(err=>{
				      	
				      })
				    }
					
				// #endif
				// this.$wqzApi.guGo_pay_good(data).then(res=>{
				// 	window.location.href = res.data
				// 		  uni.hideLoading()
				// 	// var pay_data = res.data
				// 	// wx.requestPayment({
				// 	//   timeStamp: pay_data.timeStamp,
				// 	//   nonceStr: pay_data.nonceStr,
				// 	//   package: pay_data.package,
				// 	//   signType: 'MD5',
				// 	//   paySign: pay_data.paySign,
				// 	//   success (res) {
				// 	// 	  uni.showToast({
				// 	// 	  	title:'支付成功',
				// 	// 		icon:'none'
				// 	// 	  })
				// 	// 	  that.$refs.paging.reload()	
				// 	// 	  that.current=2
				// 	// 	  uni.hideLoading()
				// 	//   },
				// 	//   fail (res) {
				// 	// 	  uni.hideLoading()
				// 	//   }
				// 	// })
				// })
			},
			// 申请退款
			refund(item , ite ,type){
				var data = {
					order_id : item.id,
					order_goods_spec_id : ite.id
				}
				uni.navigateTo({
					url:`/pages/order_other_list/refund?id=${data.order_id}&order_goods_spec_id=${data.order_goods_spec_id}&type=${type}&num=${ite.num - ite.refund_num}`
				})
			},
			Order_cancel(item){
				// 取消订单
				uni.showModal({
					title: '提示',
					content: '关闭订单后订单无法恢复',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						this.$gugoApi.GoodsOrder_cancel({id:item.id}).then(res=>{
							this.current = 6
							this.$refs.paging.reload()	
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
				
			},
			tui_order(item){
				// 订单退款
				// console.log(item , '需要申请退款的订单')
				if(this.tui_text==''){
					uni.showToast({
						title:'请输入退款原因',	
						icon:'none'
					})
					return
				}
				var data = {
					"id": item.id,
					"remark": this.tui_text
				}
				this.$wqzApi.shop_order_application_refund(data).then(res=>{
					this.current = 2
					this.tui_show = false
					this.$refs.paging.reload()	
				})
				
			},
			tui_show_pop(item){
				// 申请退款弹出层
				this.tui_info = item
				this.tui_text = ''
				this.tui_show = true
			},
			
			order_del(item){
				uni.showModal({
					title: '提示',
					content: '删除订单后订单无法恢复',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						this.$wqzApi.shop_order_del({id:item.id}).then(res=>{
							this.$refs.paging.reload()	
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
				
			},
		wxPay(item){
			this.pay_item = item
			
			if(this.gtype==1){
				// 补价商品
				this.shure_pay(item)
			}else{
				// 代买商品需要选择地址
				this.address_pop_show = true 
			}
			
		},
		addressShure_pay(item){
			if(this.address.id){
				this.shure_pay(item)
			}else{
				uni.showToast({
					title:"请选择邮寄地址",
					icon:'none'
				})
			}
		},
		shure_pay(item){
			// var item = this.pay_item
			uni.showLoading({
				title:'支付中',
			})
			if(this.gtype==1){
				// 补价
				var data = {
					id:item.gid,
					order_id:item.id,
					num:item.num,
				}
				this.pay_buJia(data)
			}else{
				// 代买
				var data = {
					id:item.gid,
					order_id:item.id,
					num:item.num,
					address_id:this.address.id
				}
				this.pay_daiMai(data)
			}
		},
		pay_buJia(data){
			this.$wqzApi.reshoot_goods_pay(data).then(res=>{
				console.log(res.data)
				window.location.href = res.data
				// var data =JSON.parse(res.data)
				// 吊起微信支付
				// wx.requestPayment({
				//   timeStamp: data.timeStamp,
				//   nonceStr: data.nonceStr,
				//   package: data.package,
				//   signType: 'MD5',
				//   paySign: data.paySign,	
				//   success (res) {
				// 	  uni.hideLoading()
				// 	  uni.showToast({
				// 	  	title:'支付成功',
				// 		icon:'none'
				// 	  })
				// 	 this.$refs.paging.reload()	
				//   },
				//   fail (res) {
				// 	  uni.hideLoading()
				// 		this.$refs.paging.reload()	
				// 	  // console.log(res , '支付失败返回')
				//   }
				// })
			}).catch(err=>{
				
			})
		},
		pay_daiMai(data){
			this.$wqzApi.pay_buy_pay(data).then(res=>{
				
				window.location.href = res.data
				// 吊起微信支付
				// var data =JSON.parse(res.data)
				// wx.requestPayment({
				//   timeStamp: data.timeStamp,
				//   nonceStr: data.nonceStr,
				//   package: data.package,
				//   signType: 'MD5',
				//   paySign: data.paySign,	
				//   success (req) {
					  
				// 	 //  uni.hideLoading()
				// 	 //  uni.showToast({
				// 	 //  	title:'支付成功',
				// 		// icon:'none'
				// 	 //  })
				// 	 // this.$refs.paging.reload()	
				//   },
				//   fail (err) {
				// 	  uni.hideLoading()
				// 		this.$refs.paging.reload()	
				// 	  // console.log(err , '支付失败返回')
				//   }
				// })
			}).catch(err=>{
				
			})
		},
			delShure(id){
				// 代买代付删除
				var data = {id:id}
				uni.showModal({
					title: '提示',//标题
					content: "确认删除订单",//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码	
							this.$wqzApi.Buy_del(data).then(res=>{
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								this.$refs.paging.reload()
							})
						} else if (res.cancel) { //点击取消之后执行的代码	
						}
					},
				});
				
			},
			seeInfo(url) {
				
				if(url){
					uni.showLoading({
						title: '加载中'
					});
					uni.previewImage({
						urls: [url],
						complete: () => {
							uni.hideLoading();
						}
					});
				}
			},
			fahuoAll(){
				// 合并发货
				// console.log(this.chooseItem)
				var str = this.chooseItem.join(',')
				this.navTo('/pages/complete/complete?type='+this.type+'&id='+str)
			},
			toInfo(id){
				var url = '/pages/goods_order_info/goods_order_info?id='+id
				uni.navigateTo({
					url:url
				})
			},
			del(id){
				var that = this
				uni.showModal({
					title: '提示',//标题
					content: "确认取消订单",//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码
							that.$wqzApi.buy_status({id:id,"status": 5 }).then(res=>{
								uni.showToast({
									title:'操作成功',
									icon:'none'
								})
								this.$refs.paging.reload()
							})
						} else if (res.cancel) { //点击取消之后执行的代码
						}
					},
				});
			},
			queryList(pageNo, pageSize) {
				/**
				 * @status 0待付款 1代发货 2退款中 3已退款 4已发货5已收货6已完成 7已经关闭
				*/ 
			   var status = 0
				status = this.current
				switch (Number(this.current)) {
				    case 0: //全部
				    	status = null
				        break;
				    case 1:	//代付款
						status = 0
						break;
					case 2: //待发货
						status = 1
						break;
					case 3://待收货/已发货
						status = 4
						break;
					case 4://已收货
						status = 5
						break;
					case 5://已完成
						status = 6
						break;
					case 6://已关闭
						status = 7
						break;
					case 7://退款中
						status = 2
						break;
					case 8://已退款
						status = 3
						break;
					default:
						status = null
					break;
				}
			  
				var data = {
					page:pageNo,
					limit:pageSize,
					"status": status, //0待支付 1已支付 3退款中 4已退款
					"code": this.code, //订单号
					"gtype": this.gtype //1补价商品 2代买商品
				}
				this.$wqzApi.shop_order_list(data).then(res=>{
					// 0待支付 1待发货 2退款中 3已退款 4已发货5已收货6已完成 7已关闭
					this.barList = [
						{name: '全部'},
						{name: `待付款(${res.data.statusCount.status0})`},
						{name: `待发货(${res.data.statusCount.status1})`},
						{name: `已发货(${res.data.statusCount.status4})`},
						{name: `已收货(${res.data.statusCount.status5})`},
						{name: `已完成(${res.data.statusCount.status6})`},
						{name: `已关闭(${res.data.statusCount.status7})`},
						{name: `退款中(${res.data.statusCount.status2})`},
						{name: `已退款(${res.data.statusCount.status3})`},
					]
					this.$refs.paging.complete(res.data.list);
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			},
			barChange(e){
				
					this.current = e
				
				this.$refs.paging.reload()	
				this.chooseItem = []
			},
			radioChoose(key){
				this.dataList.forEach((item,index)=>{
					if(index == key){
						this.dataList[index].isChoose = !this.dataList[index].isChoose
					}
				})
				this.chooseItem = []
				this.dataList.forEach((item,index)=>{
					if(item.isChoose == true){
						this.chooseItem.push(item.id)
					}
					
				})
				// console.log(this.chooseItem )
				if(this.chooseItem.length>1){
					
				}
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			go_comment(item){
				// console.log(item)
				var data = {
					pic:item.order_spec[0].goods_data.pic,
					id:item.id,
					name:item.order_spec[0].goods_data.name,
					gid:item.order_spec[0].goods_data.id,
					order_id:item.id,
				}
				 data = JSON.stringify(data)
				uni.navigateTo({
					url:`/pages/comment/comment?good=${data}&code=${item.code}` ,
				})
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url(./index.scss);
	@import url(./complete.scss);
</style>
